<template>
	<view class="comment-record">
		<view class="comment-record-title">
			全部评论
		</view>
		<u-sticky offset-top="0" customNavHeight="0">
			<view class="comment-record-badges">
			    <u-tag
					class="tag"
					v-for="(item, index) in radios"
					:key="index"
					:text="`${item.text+item.num}`"
					:borderColor="item.checked?'#D0EAF7':'#F1F1F1'" 
					:bgColor="item.checked?'#D0EAF7':'#F1F1F1'" 
					:color="item.checked?'#0F95DA':'#434343'" 
					size="mini"
					@click="onTag(index)"
			    >
			    </u-tag>
			</view>
		</u-sticky>
		<view class="comment-record-box">
			<view class="comment-record-item" v-for="(item,index) in rateList" :key="index">
				<view class="comment-record-commenter">
					<view class="comment-record-commenter-info">
						<u-avatar
							class="avatar"
							:src="item.avatar"
							size="50"
							@click.native.stop="onOther(item.id)"
						></u-avatar>
						<text class="name">{{item.name}}</text>
						<text class="tag">{{'买过'+item.buy+'次'}}</text>
					</view>
					<view class="small-text">
						{{item.date}}
					</view>
				</view>
				<view class="comment-record-rate">
					<u-rate active-color="#FED942" readonly gutter="0" size="16" value="5" :count="5"></u-rate>
					<view class="small-text">非常满意</view>
					<view class="small-text product">已购&nbsp;广州纯玩五大景区</view>
				</view>
				<view class="comment-record-notes">
					{{item.assess}}
				</view>
				<view class="comment-record-album">
					<u-album
						:urls="item.imageList" 
						:multipleSize="'230rpx'" 
						:singleSize="200"
					></u-album>
				</view>
				<commonPostActions :data="item" :show-collect="false"></commonPostActions>
			</view>
		</view>
	</view>
</template>

<script>
	import commonPostActions from '@/components/common-post-actions/common-post-actions.vue';
	export default {
		name:"common-all-comments",
		components: {
		   commonPostActions
		},
		props:{
			rateList:{
				type:Array,
				default:()=>[]
			},
		},
		data() {
			return {
				radios: [
				    {	
						text:"全部",
				        checked: true,
						num:59
				    },
				    {	
						text:"最新",
				        checked: false,
						num:12
				    },
				    {	
						text:"图/视频",
				        checked: false,
						num:6
				    },
					{
						text:"非常满意",
					    checked: false,
						num:55
					},
					{
						text:"满意",
					    checked: false,
						num:4
					},
					// {
					// 	text:"一般",
					//     checked: false,
					// 	num:2
					// },
					// {
					// 	text:"差评",
					//     checked: false,
					// 	num:1
					// },
					{
						text:"回头客",
					    checked: false,
						num:8
					},
				],
			};
		},
		methods:{
			onTag(name) {
			    this.radios.map((item, index) => {
			        item.checked = index === name ? true : false;
			    });
			},
			onOther(id){
				uni.navigateTo({
					url: '/pages/user/others/others?userId='+id
				});
			},
		}
	}
</script>

<style lang="scss">
	::v-deep.uni-system-preview-image{
		z-index: 99999999!important;
	}
	.comment-record{
		height: 1350rpx;
		
		width: 100%;
		&-badges{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			border-start-start-radius: 20px;
			border-start-end-radius: 20px;
			background-color: #FFFFFF;
			padding: 20rpx;
			.tag{
				min-width: 100rpx;
				margin: 10rpx;
				font-weight: bold;
				letter-spacing: 2rpx;
			}
		}
		
		&-title{
			text-align: center;
			font-weight: bold;
			padding-top: 20rpx;
		}
		.small-text{
			font-size: 26rpx;
			color: #676767;
		}
		&-item:last-child{
			border: none!important;
		}
		&-box{
			height: calc(100% - 250rpx);
			overflow: scroll;
		}
		&-item{
			border-bottom: 10rpx solid #F1F1F1;
		}
		.comment-record-commenter{
			padding: 10rpx 20rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-info{
				line-height: 40rpx;
				flex: 1;
				display: flex;
				align-items: center;
				.tag{
					margin: 0!important;
					background-color: #FDD391;
					border-radius: 20rpx;
					font-size: 18rpx;
					padding: 0 10rpx;
					line-height: 30rpx;
					color: #BC7C20;
				}
				.name{
					margin: 0 20rpx;
				}
			}
			.image{
				width:140rpx;
				margin-left: 20rpx;
				height: 140rpx;
				border-radius: 15rpx;
			}
		}
		.comment-record-rate{
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			.small-text{
				margin-left: 20rpx;
			}
			.product{
				margin-left: 50rpx;
			}
		}
		.comment-record-notes{
			padding: 20rpx;
			// font-size: 30rpx;
		}
		.comment-record-album{
			padding: 20rpx;
			border-bottom: 1rpx solid #F8F8F8;
		}
		
	}
</style>